<script setup lang="ts">
import { ref } from "vue";

const activeIndex = ref(0); // 默认激活第一个Tab

const functionClick = (index) => {
  activeIndex.value = index;
};

const list = ref([
  {
    title: "Vue3.0 无缝滚动组件展示数据第1条",
    date: Date.now(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第2条",
    date: Date.now(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第3条",
    date: Date.now(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第4条",
    date: Date.now(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第5条",
    date: Date.now(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第6条",
    date: Date.now(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第7条",
    date: Date.now(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第8条",
    date: Date.now(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第9条",
    date: Date.now(),
  },
]);
</script>

<template>
  <div>
    <div
      style="margin-top: 47px; display: flex; justify-content: space-between"
    >
      <div style="font-size: 22px; font-weight: bold">用户故事和评价</div>
      <div style="line-height: 30px">
        <span>查看更多</span>
        <i class="iconfont icon-you"></i>
      </div>
    </div>

    <div
      style="
        width: 1240px;
        overflow-x: hidden;
        margin-bottom: 37px; /* 隐藏x轴滚动条 */
      "
    >
      <vue3-seamless-scroll
        :list="list"
        direction="left"
        class="v-s-s"
        :step="1.4"
        :hover="true"
        style="display: flex"
      >
        <div class="live_box" style="">
          <div
            style="
              display: flex;
              width: 220px;
              position: absolute;
              top: 20px;
              align-items: center;
            "
          >
            <div class="live_img" style="top: -30px"></div>
            <div
              style="margin-left: 30px; text-align: center; height: fit-content"
            >
              <div>孙小萌</div>
              <div
                style="
                  width: 30px;
                  height: 4px;
                  background: #fd992b;
                  border-radius: 4px 4px 4px 4px;
                  margin: 4px auto;
                "
              ></div>
              <div>创意设计</div>
            </div>
          </div>
          <div
            style="
              text-indent: 2em;
              padding: 90px 8px 20px;
              width: 220px;
              margin-top: 30px;
              background-color: #fff;
            "
          >
            时间过得真快，一学期就在我们眼前悄悄溜走，在这几个月中，我有了不少的收获!我特别特别要感谢有大爱的丹丹老师，每次都第一时间帮子悦解答问题，技能上有很大提升，感恩遇见你!
          </div>
        </div>
      </vue3-seamless-scroll>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.icon-shijian {
  color: #fff;
}
.live_img {
  width: 88px;
  height: 88px;
  background-size: contain;
  background: url("@/assets/images/CloudClassroom/evaluate_one.png") no-repeat
    center/cover;
}
.live_box {
  width: 260px;
  // padding: 20px;
  margin: 0 10px;
  // background-color: #fff;
  border-radius: 8px 8px 8px 8px;
}
.function {
  margin: 13px 0 22px;
  //   width: 88px;
  padding: 0 13px;
  height: 36px;
  margin-right: 20px;
  line-height: 36px;
  cursor: pointer;
  text-align: center;
  border: 1px solid #dddddd;
  border-radius: 18px 18px 18px 18px;
  box-shadow: 0px 1px 4px 0px rgba(102, 102, 102, 0.25);
}
.active-tab {
  background: linear-gradient(to bottom, #a7dffb, #1ca9eb);
}
</style>
